<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<u-search :disabled="true" shape="square" :show-action="false"   placeholder="搜索修勾" bg-color="pink" height="80" @click="switchSear"></u-search>
		<!-- 顶部轮播图 -->
		<view style="margin-top: 10rpx;">
			<u-swiper
			          :list="list"
					  height="400"
					  :title="false"
			          circular
					  :autoplay='false'
			  ></u-swiper>
		</view>
		
		<!-- 中部tabs -->
		<view class="mytabs">
			 <u-tabs 
			 ref="tabs"
			 :list="list1" 
			 :is-scroll='false' 
			 :current="current" 
			 @change='tabChange'
			 :bold="true"
			 bar-width="250"
			 height="100"
			 font-size="35"
			 active-color='pink'
			 ></u-tabs>
		</view>




		<doglist :current="current"  v-if="current==1"></doglist>
		<dog-hot  v-else-if="current==0" ></dog-hot>
		
		
		</mescroll-body>
	</view>
</template>

<script>
	// 引入下拉刷新样式
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import doglist from './doglist.vue'
	import dogHot from './dogHot.vue'
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components:{
			doglist,
			dogHot,
		},
		data() {
			return {
				list:[
					{
						image: 'https://img9.doubanio.com/view/group_topic/l/public/p465391666.webp',
						title: '修勾修勾脸红'
					},
					{
						image: 'https://img9.doubanio.com/view/group_topic/l/public/p465391604.webp',
						title: '修勾修勾脸红'
					},
					{
						image: 'https://img1.baidu.com/it/u=948282742,4171512851&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=350',
						title: '修勾修勾脸红'
					},
					
				],
				
				list1:[
					{
						name:'推荐'
					},
					{
						name:'最新'
					},
				
					],
				current: 0,
			}
		},
		onLoad() {

		},
		methods: {
			tabChange(index){
				this.current = index;
			},
			
			upCallback(page) {
				this.mescroll.endErr();
				// this.mescroll.endSuccess();
			},
			
			downCallback(){
				this.mescroll.resetUpScroll();
				// this.mescroll.endSuccess();
				this.mescroll.endErr();
			},
			
			switchSear(){
				
				uni.navigateTo({
					url: "/components/search/search"
				})
			}
			

		}
	}
</script>

<style>
	.mytabs{
		margin-top: 30rpx;
		margin-bottom: 10rpx;
	}
	
	
</style>
